<template>
  <div class="home-bottom">
    <div class="content">
      <div class="card">
        <div class="title">
          <div class="title-img"><span>政策法规</span></div>
          <span class="more1" @click="goPath('/lawInfo')">更多 ></span>
        </div>
        <div class="card-content zcfg">
          <div class="left">
            <div class="block">
              <el-carousel height="320px">
                <el-carousel-item>
                  <img src="@/assets/img/loop2.png" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img src="@/assets/img/loop1.png" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img src="@/assets/img/loop3.jpg" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div class="right">
            <ul>
              <li class="item">
                <div class="text">《生态环境部南京环境科学研究所国家环境保护重点实验室年度绩效考核办法（试行）》</div>
                <span class="time">2022-12-08</span>
              </li>
              <li class="item">
                <div class="text">《生态环境部南京环境科学研究所仪器设备绩效考核评价办法（试行）》</div>
                <span class="time">2022-12-08</span>
              </li>
              <li class="item">
                <div class="text">科技部办公厅 财政部办公厅关于发布2022年中央级高校和科研院所等单位重大科研基础设施和大型科研仪器开放共享评价考核结果的通知</div>
                <span class="time">2022-10-25</span>
              </li>
              <li class="item">
                <div class="text">科技部办公厅 科技部办公厅关于印发《国家重大科研基础设施和大型科研仪器开放共享评价考核实施细则》的通知</div>
                <span class="time">2022-07-10</span>
              </li>
              <li class="item">
                <div class="text">
                  文化和旅游部关于推动在线旅游市场高质量发展的意见。
                </div>
                <span class="time">2023-06-08</span>
              </li>
              <li class="item">
                <div class="text">中华人民共和国反电信网络诈骗法</div>
                <span class="time">2023-06-08</span>
              </li>
              <li class="item">
                <div class="text">银保监会发布《理财公司内部控制管理办法》</div>
                <span class="time">2023-06-08</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="card">
          <div class="title">
            <div class="title-img"><span>科研设施</span></div>
            <span class="more1" @click="goPath('/keyansheshi')">更多 ></span>
          </div>
          <div class="card-content">
            <ul>
              <li class="item" v-for="(item, index) in facilitiesList" :key="index">
                <div class="video">
                  <img v-if="item?.fileImgList?.length != 0" :src="item?.fileImgList[0]?.url" alt="" />
                  <img v-else src="@/assets/img/yiqi1.jpeg" alt="" />
                </div>
                <div class="text">
                  {{ item.facilityNameCn }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="card">
          <div class="title">
            <div class="title-img"><span>仪器设备</span></div>
            <span class="more1" @click="goPath('/yiqishebei')">更多 ></span>
          </div>
          <div class="card-content">
            <ul>
              <li class="item" v-for="(item, index) in instrumentList" :key="index">
                <div class="video">
                  <img v-if="item?.fileImgList?.length != 0" :src="item?.fileImgList[0]?.url" alt="" />
                  <img v-else src="@/assets/img/yiqi1.jpeg" alt="" />
                </div>
                <div class="text">{{item.instrumentNameCn}}</div>
                <div class="text2">
                  <p>型号：{{ item.specifications }}</p>
                  <p>类型：{{ item.instrumentClassifyNum }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPublishDataDataList,
} from '@/api/yqgx/publish'
export default {
  data() {
    return {
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 9,
        resourceType: ''
      },
      instrumentList: [],
      facilitiesList: []
    }
  },
  created() { this.getList() },
  methods: {
    goPath(path) {
      this.$router.push({ path: path })
    },
    getList() {
      this.queryParams.resourceType = 'instrument'
      getPublishDataDataList(this.queryParams).then((res) => {
        this.instrumentList = res.data.slice(0,3)
      })
      this.queryParams.resourceType = 'facilities'
      getPublishDataDataList(this.queryParams).then((res) => {
        this.facilitiesList = res.data.slice(0,3)
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .more1 {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
  .home-bottom {
    width: 100%;
    height: 100%;
    padding-bottom: 56px;
    background: url('~@/assets/img/视频专栏背景图@2x.png') no-repeat center;
    background-size: 100% 100%;
    margin-top: -50px;
    .content {
      width: 63%;
      height: 100%;
      margin: 0 auto;
      padding-top: 130px;
      .card {
        border: none !important;
        .title {
          position: relative;
          border-bottom: 1px solid #e3e7eb;
          .title-img {
            width: 144px;
            height: 56px;
            background: url('~@/assets/img/标题@2x.png') no-repeat center;
            background-size: cover;
            position: absolute;
            bottom: -12px;
            text-align: center;
            span {
              line-height: 40px;
              font-size: 20px;
              font-weight: 600;
              color: #fff;
            }
          }
          .more1 {
            position: absolute;
            right: 0px;
            bottom: 10px;
          }
        }
      }
      .card-content {
        padding-top: 24px;
      }
      .zcfg {
        display: flex;
        .left {
          width: 40%;
          margin-right: 30px;
        }
        .right {
          width: 60%;
          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 26px;
            &:last-child {
              padding-bottom: 0;
            }
            .text {
              width: 80%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 16px;
              color: #333;
              font-weight: 400;
              position: relative;
              padding-left: 20px;

              &::before {
                position: absolute;
                left: 0;
                top: 9px;
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #d2dce4;
                z-index: 1;
              }
            }
            .time {
              font-size: 16px;
              font-weight: 400;
              color: #adb2b5;
            }
            &.active {
              flex-direction: column;
              align-items: flex-start;
              .text {
                color: #006eca;
                &::before {
                  background: #006eca;
                }
              }
              .description {
                padding-top: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid #e3e7eb;
                display: flex;
                img {
                  display: inline-block;
                  width: 110px;
                  height: 70px;
                }
                .tt {
                  width: 100%;
                  word-break: break-all;
                  color: #666;
                  font-size: 16px;
                }
                .des {
                  position: relative;
                  padding-left: 15px;
                  .time {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  :deep(.block) {
    .el-carousel__item {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .center {
    padding-top: 90px;
    .card-content {
      background: #f0f2f4;
      margin-top: 24px;
      padding: 30px;
      ul {
        li {
          padding-bottom: 28px;
          &:last-child {
            padding-bottom: 0;
          }
        }
      }
      .text {
        font-size: 16px;
        color: #333;
        font-weight: 400;
        position: relative;
        padding-left: 20px;
        width: 100%;
        white-space: nowrap;
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;

        &::before {
          position: absolute;
          left: 0;
          top: 9px;
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #d2dce4;
          z-index: 1;
        }
      }
    }
  }
  .bottom {
    padding-top: 90px;
    .card-content {
      ul {
        display: flex;
        justify-content: space-between;
        li {
          width: 32%;
          img {
            width: 100%;
            height: 200px;
          }
          .text {
            font-size: 16px;
            color: #333;
            width: 100%;
            white-space: nowrap;
            position: relative;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
</style>
